<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>array</title>
    <style>
        td {
            border: 1px solid;
        }

        #tbl {
            width: 300px;
            height: 200px;

        }


    </style>
</head>
<body>
<table id="tbl"></table>
<form id="form-item">
    <div>
        <prompt>请输入修改后的姓名：</prompt>
        <input type="text" name="uname" id="newName">
    </div>
    <div>
        <prompt>请输入修改后的年龄：</prompt>
        <input type="number" name="uage" id="newAge">
    </div>
    <div>
        <prompt>请输入修改后的性别：</prompt>
        <input type="radio" name="sex" value="男" class="radio">男
        <input type="radio" name="sex" value="女" class="radio" checked>女
    </div>
    <input type="button" value="确认修改" onclick="qd()">
</form>
<script>
    var persons = [
        {name: "张三", age: 33, sex: '男'},
        {name: "老王", age: 45, sex: '男'},
        {name: "桂香", age: 19, sex: '女'},
        {name: "魏红", age: 60, sex: '女'},
        {name: "二狗", age: 5, sex: '男'}
    ];//声明并赋值一个数组

    function showTable() {//把数组里的内容以表格的形式显示出来
        var str = "";
        /*for (i = 0; i < persons.length; i++) {
            if (i in persons)*/
                for (i in persons) { //与上两行有相同效果
                    str += `<tr>
        <td>${persons[i].name}</td>
        <td>${persons[i].age}</td>
        <td>${persons[i].sex}</td>
        <td><a href="javascript:del(${i})">删除</a>|<a href="javascript:update(${i})">更新</a></td>
        </tr>`;
                    /*str+="<tr>";
                     for(i in persons){
                     for(j in persons[i]){
                     str+="<td>"+persons[i][j]+"</td>"
                     }
                     }
                     str+=`<td><a href="javascript:del(${i})">删除</a></td>
                     </tr>`;*/
                    document.querySelector('#tbl').innerHTML = str;
                }
        }
    }
    showTable();//调用这个方法，表格就是显示
    function del(e) {
        delete persons[e];
        showTable();
    }





</script>
</body>
</html>